{% assign class_permanent = '' %}
{% assign page_slug = page.url | split: '/' | last %}

{% if page_slug|length %}
  {% assign class_permanent = 'navdrawer-permanent-lg' %}
{% endif %}

<div aria-hidden="true" class="navdrawer {{class_permanent}} doc-navdrawer" id="{{ site.id.navdrawer }}" tabindex="-1">
  <div class="navdrawer-content">
    <div class="d-flex flex-column doc-navdrawer-body">
      <div class="navdrawer-header">
        <a aria-label="Daemonite Material" class="doc-logo" href="{{ site.baseurl }}/">M</a>
        <span class="navbar-brand">{{ site.title }}</span>
      </div>

      <form class="navdrawer-body mt-2">
        <div class="floating-label textfield-box">
          <label for="doc-search">Search</label>
          <input aria-label="Search" autocomplete="off" data-siteurl="{{ site.url }}" class="form-control doc-search" id="doc-search" type="search">
        </div>
        <button class="sr-only" type="submit">Search documentation</button>
      </form>

      <div class="navdrawer-divider mb-0"></div>

      <nav class="navdrawer-nav">

        {% assign page_slug = page.url | split: '/' | last %}

        {% for group in site.data.nav %}

        {% assign class_collapsed = 'collapsed' %}
        {% assign class_show = '' %}
        {% assign group_slug = group.title | slugify %}

        {% if group_slug == page.group %}
          {% assign class_collapsed = '' %}
          {% assign class_show = 'show' %}
        {% endif %}

        {% if group.title == 'Components' or group.title == 'Material' %}

        <div class="navdrawer-divider"></div>

        {% endif %}

        <a class="nav-item nav-link {{ class_collapsed }}" data-toggle="collapse" href="#{{ site.id.navdrawer }}-{{ group_slug | replace: ' ', '-' }}"><strong>{{ group.title }}</strong></a>
        <div class="collapse pb-2 {{ class_show }}" id="{{ site.id.navdrawer }}-{{ group_slug | replace: ' ', '-' }}">

          {% for doc in group.pages %}

          {% assign class_active = 'text-black-secondary' %}
          {% assign doc_slug = doc.title | slugify %}

          {% if doc_slug == page_slug and group_slug == page.group %}
            {% assign class_active = 'active' %}
          {% endif %}

          <a class="nav-item nav-link pl-4 py-2 {{ class_active }}" href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group.title | downcase | replace: ' ', '-' }}/{{ doc.title | downcase | replace: ' ', '-' | replace: '-&- ', '-'  }}/"><span class="font-weight-normal">{{ doc.title }}</span></a>

          {% endfor %}

        </div>

        {% endfor %}

      </nav>

      <div class="mt-auto">
        <div class="navdrawer-divider mt-0"></div>
        <div class="navdrawer-nav">
          <a class="nav-item nav-link text-black-secondary" href="https://github.com/Daemonite/material" target="_blank"><i class="material-icons mr-3">code</i>Fork me on GitHub</a>
          <a class="nav-item nav-link text-black-secondary" href="http://www.daemon.com.au/" target="_blank"><i class="material-icons mr-3 text-danger">favorite</i>Made by Daemon</a>
        </div>
      </div>
    </div>
  </div>
</div>
